<ul class="ti3-steps" #stepRef [id]="appendId('list')">
  <ng-container *ngFor="let step of steps; let i=index; trackBy: trackByIndexFn">
    <li
      class="ti3-steps-line"
      #line
      *ngIf="i > 0"
      [ngClass]="{'ti3-steps-complete': getStepState(i) === 'complete'|| getStepState(i) === 'error',
                    'ti3-steps-active': getStepState(i) === 'active',
                    'ti3-steps-uncomplete': getStepState(i) === 'uncomplete' && clickable && !step.disabled}"
    ></li>

    <li
      [id]="appendId(i)"
      class="ti3-steps-explain"
      #explain
      [ngClass]="{'ti3-steps-complete': getStepState(i) === 'complete',
                    'ti3-steps-active': getStepState(i) === 'active',
                    'ti3-steps-disabled': getStepState(i) === 'uncomplete' && (step.disabled || !clickable),
                    'ti3-steps-uncomplete': getStepState(i) === 'uncomplete' && clickable && !step.disabled,
                    'ti3-steps-error': getStepState(i) === 'error',
                    'ti3-steps-explain-clickable': clickable && !step.disabled}"
      (click)="onClick(i)"
      (keydown.enter)="onClick(i)"
      tiOutline
      [attr.tabindex]="clickable && !step.disabled ? 0 : -1"
    >
      <div class="ti3-steps-text-container">
        <section *ngIf="iconTemplate else defaultIconTemplate" class="ti3-steps-icon">
          <ng-container *ngTemplateOutlet="iconTemplate; context: {$implicit: step, index: i}"></ng-container>
        </section>
        <ng-template #defaultIconTemplate>
          <div class="ti3-steps-box">
            <div class="ti3-steps-box-number">
              <ti-icon *ngIf="getStepState(i) === 'error'" name="alert-error"></ti-icon>
              <ti-icon *ngIf="getStepState(i) === 'complete'" name="alert-success"></ti-icon>
              <span *ngIf="getStepState(i) === 'uncomplete' || getStepState(i) === 'active'">{{i + 1}}</span>
            </div>
          </div>
        </ng-template>
        <div class="ti3-steps-text" [ngStyle]="{'max-width': maxWidth}" [id]="appendId('i_label')">
          <ng-container *ngIf="stepTemplate else defaultTemplate">
            <ng-container *ngTemplateOutlet="stepTemplate; context: {$implicit: step, index: i}"> </ng-container>
          </ng-container>
        </div>
        <ng-template #defaultTemplate>
          <span tiOverflow [maxLine]="2" [textContent]="step[labelKey]"></span>
        </ng-template>
      </div>
    </li>
  </ng-container>
</ul>
